<template>
	<view v-if="list.length>0">
		<view v-for="(item,index) in list" :key="index">
			<!-- 标题与描述 -->
			<view>
				<view class="text-primary text-one-hidden" style="font-size:30rpx">{{item.name}}</view>
				<view class="text-gray text-xs text-two-hidden">{{item.introduce}}</view>
			</view>
			<!-- 套餐 -->
			<view class="grids col-3 grid-square margin-bottom" 
				style="position:relative;">
				<view v-for="(paid,i) in item.specifications" :key="i">
					<view style="height:16upx;background-color: transparent;"></view>
					<view class="content bg-white text-center padding-top"
						:class="paid.check ? 'border-primary' : 'borders'" style="border-radius: 20upx;height:auto;min-height:5.8rem;height:calc(100% - 16upx)"
						@tap="handleClick(paid,item)">
						<view>
							<view  v-if="paid.isSpecifications">
								<view  class="padding-lr-xxs">{{paid.label}}</view>
								<view v-if="paid.introduce" class="padding-lr-xxs text-xs text-orange margin-bottom-sm">{{paid.introduce}}</view>
							</view>
							<view v-else class="text-gray text-one-hidden">
								<!-- 除流量显示时长 -->
								<view v-if="urlParams.classifyId&&urlParams.classifyId!='net.cellular'" class="text-lg">
									{{ paid.buyNum }}
									<!-- 月 -->
									<text v-if="paid.buyUnit==0">
										<text v-if="paid.buyNumber%12===0">{{paid.buyNum/12}}{{$t('JLink.buy.Y')}}</text><!-- 年 -->
										<text v-else>
											<text v-if="paid.buyNum==1">{{$t('JLink.buy.Month')}}</text>
											<text v-else>{{$t('JLink.buy.Months')}}</text>
										</text>
									</text>
									<!-- 年 -->
									<text v-if="paid.buyUnit==1">
										<text v-if="paid.buyNum==1">{{$t('JLink.buy.Year')}}</text>
										<text v-else>{{$t('JLink.buy.Y')}}</text>
									</text>
									<!-- 天 -->
									<text v-if="paid.buyUnit==2">
										<text v-if="paid.buyNum==1">{{$t('JLink.buy.Day')}}</text>
										<text v-else>{{$t('JLink.buy.D')}}</text>
									</text>
									<view v-if="urlParams.classifyId!='xmc.css'" class="text-xxs">
										<text v-if="urlParams.classifyId==='xmc.voes'" style="white-space: pre-line"></text>
										<!-- <text v-else-if="urlParams.classifyId==='pms.voes'" style="white-space: pre-line">语音呼叫次数：</text> -->
										<text v-else-if="urlParams.classifyId==='pms.sms'" style="white-space: pre-line">数量：</text>
										<text style="white-space: pre-line">{{paid.tags}}</text>
									</view>
								</view>
								<!-- 流量显示 -->
								<view v-else class="text-df text-gray text-one-hidden">
									{{paid.label}}
								</view>
							</view>
							<!-- 价格 -->
							<view class="text-one-hidden" style="margin-top: 15upx;">
								<text class="text-xs text-primary">{{paid.currencyUnit}}</text>
								<text class="text-xxl text-primary">{{paid.price}}</text>
								<!-- 原价 -->
								<view class="text-xs text-orange margin-bottom-sm del"
									v-if="paid.indicativePrice!=null&&paid.indicativePrice!=paid.price">
									{{$t('JLink.buy.Orig')}}{{paid.currencyUnit}}{{paid.indicativePrice}}
								</view>
							</view>
							<view v-if="paid.automaticPayment" style="height:40upx"></view>
							<!-- 自动续费 -->
							<view v-if="paid.automaticPayment" class="bg-orange text-xxs text-one-hidden automaticPayment">{{$t('JLink.buy.automaticPayment')}}</view>
						</view>
					</view>
					<!-- 推荐词 -->
					<view v-if="paid.recWord" class="bg-orange text-xs recWord">
						<view class="line-limit-one">{{paid.recWord}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 小主，~~暂无可购买套餐~~ -->
	<j-uni-data v-else :content="$t('JLink.buy.empty')"></j-uni-data>
</template>

<script>
export default {
 	props: {
		list: {
		  type: Array,
		  default: () => {
			return []
		  }
		},
		urlParams:{
		  type:Object,
		  default:()=>{
			return {
			  deviceId: '',
			  channel: '',
			  classifyId: ''
			}
		  }
		},
	},
	data() {
	    return {

		}
	},
	methods: {
    getKey(index){
        return  index - 7
    },
	   //点击事件
		handleClick(paid,item) {
		  this.list.forEach((t) => {
			t.specifications.forEach((z) => {
			  z.check = false;
			});
		  });
		  paid.check = true;
		  this.$emit('click', paid,item)
		}
    }
}
</script>

<style lang="less">
	@import '@/common/style/main.css';
.grids {
	display: flex;
	flex-wrap: wrap;
}

.grids.grid-square {
	overflow: hidden;
}

.grids.grid-square>view {
	margin-right: 30upx;
	margin-bottom: 30upx;
	margin-top: 12upx;
	// border-radius: 20upx;
	position: relative;
	overflow: hidden;
}

.grids.col-3.grid-square>view {
	// padding-bottom: calc((100% - 80upx)/3);
	// height: 0;
	width: calc((100% - 90upx)/3);
	.content {
		height: 220upx
	}

	.recWord {
		position: absolute;
		max-width: 98%;
		top: 0;
		left: 2upx;
		margin-right: 6upx;
		padding: 6upx 16upx;
		border-top-left-radius: 16upx;
		border-bottom-right-radius: 16upx;
	}
}
.automaticPayment{
	position: absolute;
	bottom:0;
	width: calc(100% - 2px);
	border-bottom-left-radius:16upx;
	border-bottom-right-radius:16upx;
	padding-top:4upx;
	padding-bottom:4upx;
}
.padding-lr-xxs {
	padding-left: 5upx;
	padding-right: 5upx;
}
.del{
	text-decoration: line-through;
}
</style>
